<template>
  <div class="dialog-container">
    <el-dialog
      :title="dialogType==='add'?'添加区域':dialogType === 'detail'?'区域详情':'修改区域'"
      :visible="dialogVisible"
      @open="initData"
      @close="closeDialog"
    >
      <el-form
        ref="form"
        :model="dataForm"
        class="dialog-form"
        :rules="rules"
        label-width="110px"
        size="mini"
        wdith="50%"
        :disabled="dialogType === 'detail'"
      >
        <el-row>
          <el-col v-if="areaData.parentid !== null && areaData.parentid !== 0" :span="16">
            <el-form-item label="所属区域" prop="parentid">
              <el-input v-model="areaname" readonly />
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="区域代码：" prop="areacode">
              <el-input v-model="dataForm.areacode" />
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="名称：" prop="areaname">
              <el-input v-model="dataForm.areaname" />
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="中心位置：">
              <el-input v-model="dataForm.center" />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-button size="mini" @click="mapDialogVisible = true">点击地图</el-button>
          </el-col>
          <el-col :span="16">
            <el-form-item label="备注：">
              <el-input v-model="dataForm.remark" type="textarea" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button :loading="saveLoading" class="sure-btn" size="mini" type="primary" @click="handleSave">保存</el-button>
        <el-button size="mini" class="cancel-btn" @click="closeDialog">取消</el-button>
      </span>
      <el-dialog
        title="地图"
        :visible.sync="mapDialogVisible"
        width="40%"
        append-to-body
        @opened="addMarker"
        @close="removeOverlay"
      >
        <el-form class="dialog-form" label-width="100px">
          <el-row>
            <el-col :span="18">
              <el-form-item label="地理坐标：">
                <el-input v-model="coordinate" readonly />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <BaiduMap
          ref="map"
          @setPonit="setPonit"
        />
        <span slot="footer" class="dialog-footer">
          <el-button @click="mapDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="selectMap()">确定</el-button>
        </span>
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
import BaiduMap from '@/components/BaiduMap/index'
import { add, edit } from '@/api/system/area'
export default {
  name: 'AddAreaDiaolg',
  components: {
    BaiduMap
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    dialogType: {
      type: String,
      default: 'detail'
    },
    obj: {
      type: Object,
      default: null
    },
    areaData: {
      type: Object,
      default: null
    },
    areaname: {
      type: String,
      default: '无所属区域'
    }
  },
  data() {
    return {
      saveLoading: false,
      dataForm: {
        areaid: null,
        parentid: null,
        areaname: '',
        areacode: '',
        level: '',
        center: '',
        remark: ''
      },
      normalizer(node) {
        let result = {
          id: node.areaid,
          label: node.areaname,
          children: node.children || null
        }
        if (!node.children) {
          result = {
            id: node.areaid,
            label: node.areaname
          }
        }
        return result
      },
      areaTree: null,
      rules: {},
      mapDialogVisible: false,
      coordinate: ''
    }
  },
  created() {},
  mounted() {},
  methods: {
    initData() {
      if (this.obj) {
        this.dataForm = JSON.parse(JSON.stringify(this.obj))
        this.coordinate = this.dataForm.center
      }
      this.dataForm.parentid = this.areaData.parentid
      this.dataForm.level = this.areaData.level
    },
    closeDialog() {
      this.$emit('closeDialog')
      this.clearData()
    },
    handleSave() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.saveLoading = true
          if (this.dataForm.areaid) {
            edit(this.dataForm).then(() => {
              this.$message.success('修改成功')
              this.$emit('flushPage')
              this.$emit('closeDialog')
              this.clearData()
              this.saveLoading = false
            }).catch(() => {
              this.saveLoading = false
            })
          } else {
            if (this.dataForm.parentid === '') {
              this.dataForm.level = 1
            } else {
              this.dataForm.level += 1
            }
            add(this.dataForm).then(() => {
              this.$message.success('添加成功')
              this.$emit('flushPage')
              this.$emit('closeDialog')
              this.clearData()
              this.saveLoading = false
            }).catch(() => {
              this.saveLoading = false
            })
          }
        }
      })
    },
    clearData() {
      this.dataForm = {
        areaid: null,
        parentid: null,
        areaname: '',
        areacode: '',
        level: '',
        center: '',
        remark: ''
      }
      this.coordinate = ''
    },
    removeOverlay() {
      this.$refs.map.removeOverlay()
    },
    selectMap() {
      this.dataForm.center = this.coordinate
      this.mapDialogVisible = false
    },
    setPonit(data) {
      this.coordinate = data.point.lng + ',' + data.point.lat
    },
    addMarker() {
      if (this.dataForm.center === '' || this.dataForm.center === null) {
        return
      }
      const gps = this.dataForm.center.split(',')
      this.$refs.map.addMarker(gps[0], gps[1])
    }
  }
}
</script>

<style lang='scss' scoped>
</style>
